<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: auto;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="text"], input[type="number"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>购物车功能测试</h1>

    <!-- 添加商品到购物车 -->
    <div class="form-group">
        <h3>添加商品到购物车</h3>
        <label for="add-userId">用户ID:</label>
        <input type="text" id="add-userId" placeholder="输入用户ID">
        <label for="add-productId">商品ID:</label>
        <input type="text" id="add-productId" placeholder="输入商品ID">
        <label for="add-number">商品数量:</label>
        <input type="number" id="add-number" placeholder="输入商品数量">
        <button onclick="addToCart()">添加到购物车</button>
    </div>

    <!-- 更新购物车商品 -->
    <div class="form-group">
        <h3>更新购物车商品</h3>
        <label for="update-userId">用户ID:</label>
        <input type="text" id="update-userId" placeholder="输入用户ID">
        <label for="update-productId">商品ID:</label>
        <input type="text" id="update-productId" placeholder="输入商品ID">
        <label for="update-number">商品数量:</label>
        <input type="number" id="update-number" placeholder="输入商品数量">
        <button onclick="updateCart()">更新购物车</button>
    </div>

    <!-- 查询购物车 -->
    <div class="form-group">
        <h3>查询购物车</h3>
        <label for="get-userId">用户ID:</label>
        <input type="text" id="get-userId" placeholder="输入用户ID">
        <button onclick="getUserCart()">查询购物车</button>
    </div>

    <!-- 删除购物车商品 -->
    <div class="form-group">
        <h3>删除购物车商品</h3>
        <label for="del-userId">用户ID:</label>
        <input type="text" id="del-userId" placeholder="输入用户ID">
        <label for="del-productId">商品ID:</label>
        <input type="text" id="del-productId" placeholder="输入商品ID">
        <button onclick="deleteCartItem()">删除商品</button>
    </div>

    <!-- 结果显示区域 -->
    <div class="result" id="result"></div>
</div>

<script>
    const BASE_URL = "http://localhost:8080/api";

    // 添加商品到购物车
    function addToCart() {
        const userId = document.getElementById("add-userId").value;
        const productId = document.getElementById("add-productId").value;
        const number = document.getElementById("add-number").value;

        fetch(`${BASE_URL}/add/${userId}`, {
            method: "PUT",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ userId,productId, number })
        })
            .then(response => response.json())
            .then(data => {
                document.getElementById("result").innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
            })
            .catch(error => {
                console.error("Error:", error);
                document.getElementById("result").innerHTML = `<pre>请求失败：${error.message}</pre>`;
            });
    }

    // 更新购物车商品
    function updateCart() {
        const userId = document.getElementById("update-userId").value;
        const productId = document.getElementById("update-productId").value;
        const number = document.getElementById("update-number").value;

        fetch(`${BASE_URL}/update/${userId}?productId=${productId}&number=${number}`, {
            method: "PUT"
        })
            .then(response => response.json())
            .then(data => {
                document.getElementById("result").innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
            })
            .catch(error => {
                console.error("Error:", error);
                document.getElementById("result").innerHTML = `<pre>请求失败：${error.message}</pre>`;
            });
    }

    // 查询购物车
    function getUserCart() {
        const userId = document.getElementById("get-userId").value;

        fetch(`${BASE_URL}/getUserCart?userId=${userId}`)
            .then(response => response.json())
            .then(data => {
                document.getElementById("result").innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
            })
            .catch(error => {
                console.error("Error:", error);
                document.getElementById("result").innerHTML = `<pre>请求失败：${error.message}</pre>`;
            });
    }

    // 删除购物车商品
    function deleteCartItem() {
        const userId = document.getElementById("del-userId").value;
        const productId = document.getElementById("del-productId").value;

        fetch(`${BASE_URL}/delShopCart?userId=${userId}&productId=${productId}`, {
            method: "DELETE"
        })
            .then(response => response.json())
            .then(data => {
                document.getElementById("result").innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
            })
            .catch(error => {
                console.error("Error:", error);
                document.getElementById("result").innerHTML = `<pre>请求失败：${error.message}</pre>`;
            });
    }
</script>
</body>
</html>